<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <title>喵喵队-超市账单管理系统</title>
</head>
<body>
    <div class="container-fluid">
        <p class="system-name">超市账单管理系统</p>
        <div class="row loginBox">
            <div class="row row-cols-2 login-register">
                <div class="col login-btn" id="d1">登录</div>
                <div class="col register-btn" id="d2" onclick="window.open('/RegisterHtml','_self')">注册</div>
            </div>
            <div class="row login-register-form">
                <form class="form-inline" role="form" action="/login">
                    <div class="form-group">
                        <label for="user">用户名&nbsp;</label>
                        <input id="user" value="赵燕" class="form-control" type="text" name="username" placeholder="请输入用户名">
                    </div>
                    <div class="form-group">
                        <label for="mima">密码&nbsp;&nbsp;&nbsp;&nbsp;</label>
                        <input id="mima" value="0000000" class="form-control" type="password" name="password" placeholder="请输入密码">
                    </div>
                    <div class="form-group">
                        <label for="imgCode">验证码&nbsp;</label>
                        <input id="imgCode" class="form-control" style="width:100px" type="text" name="imgCode" placeholder="验证码">
                        <img style="width: 100px;height: 40px" src="/imgCode">
                    </div>
                    <div class="form-group btn-row">
                        <div class="col">
                            <button type="submit" class="btn btn-primary btn-bottom">登录</button>
                        </div>
                        <div class="col">
                            <button type="reset" class="btn btn-primary btn-bottom">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>

<style>
    html,body {
        height: 100%;
    }

    .system-name {
        font-family: 华文行楷;
        font-size: 80px;
        font-weight: bold;
        color: aliceblue;
        padding-top: 60px;
        padding-left: 120px;
    }

    .container-fluid {
        height: 100%;
        background: url("./images/login_bg.png") no-repeat;
        background-size: cover;
    }

    .loginBox {
        background-color: aliceblue;
        position:absolute;
        left:75%;
        top:50%;
        margin-left:-175px;
        margin-top:-150px;
        border-radius: 10px;
        height: 300px;
        width: 350px;
        box-shadow:2px 2px 20px 2px rgba(0,0,0,0.3);
    }

    .login-register {
        width: 100%;
        height: 50px;
        padding: 0px;
        margin: 0px;
        text-align: center;
    }

    .login-btn {
        height: 50px;
        background-color: #2e79ff;
        cursor: pointer;
        border-top-left-radius: 10px;
        line-height: 50px;
        color: aliceblue;
     }

    .register-btn {
        height: 50px;
        background-color: aliceblue;
        cursor: pointer;
        border-top-right-radius: 10px;
        line-height: 50px;
        color: #2e79ff;
    }

    .login-register-form {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .form-group {
        margin-left: 30px;
    }

    input {
        margin-bottom: 15px;
    }

    .btn-row {
        margin-left: 80px;
    }

    .btn-bottom {
        margin-bottom: 15px;
    }

</style>

<script>
    $("#d1").hover(function(){
        $("#d2").css("background-color","aliceblue");
        $("#d2").css("color","#2e79ff");
        $("#d1").css("background-color","#2e79ff");
        $("#d1").css("color","aliceblue");
    });

    $("#d2").hover(function(){
        $("#d1").css("background-color","aliceblue");
        $("#d1").css("color","#2e79ff");
        $("#d2").css("background-color","#2e79ff");
        $("#d2").css("color","aliceblue");
    });

</script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#imgCode").click(function () {
            $("#imgCode").attr("src", "/imgCode?time"+new Date().getTime())
        });
    });
</script>

</html>